<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .pic1 {
        width: 400px; 
        height: 150px;
        background: pink;

        background-image: url(images/logo.png);

        /* 1.背景图片不平铺 */
        background-repeat: no-repeat;
        /* 2.默认的情况下,背景图片是平铺的 */
        /* background-repeat: repeat; */
        /* 3. 沿着x轴平铺 */
        /* background-repeat: repeat-x; */
        /* 4. 沿着Y轴平铺 */
        /* background-repeat: repeat-y; */
        /* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */

        /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
        /* background-position: right; */
        /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
        background-position: top;
    }
    .pic2 {
        width: 400px; 
        height: 150px;
        background: white;
        background-image: url(images/logo.png);
        background-repeat: no-repeat;

        /* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px */
        /* background-position: 20px center; */
        /* 水平是居中对齐  垂直是 20 */
        background-position: center 20px;
    }
    </style>
    
</head>
<body>
    <div class="pic1"></div>
    <div class="pic2"></div>
</body>
</html>